import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc } from '../Utils'

const defaultData = [
    { type: 'oxygen', value: '46.60' },
    { type: 'silicon', value: '27.72' },
    { type: 'aluminum', value: '8.13' },
    { type: 'iron', value: '5' },
    { type: 'calcium', value: '3.63' },
    { type: 'sodium', value: '2.83' },
    { type: 'potassium', value: '2.59' },
    { type: 'others', value: '3.5' }
]

const TempChartsA05 = ({ config, apiData }) => {
    const chartRef = useRef()
    const [Spec, setSpec] = useState()

    const setSpecFunc = (data, color) => {
        const { axes_setUp, legends_setUp, type, stack, background, padding, outerRadius, innerRadius, ...item } = config || AdminRouter.Chart05
        const axes = ChartsConfig.setAxes(axes_setUp)
        const title = ChartsConfig.setTitle(item)
        const label = ChartsConfig.setLabel(item)
        const tooltip = ChartsConfig.setTooltip(item)
        const crosshair = ChartsConfig.setCrosshair(item)
        const totalLabel = ChartsConfig.setTotalLabel(item)
        const legends = ChartsConfig.setLegends(legends_setUp)
        const pie = ChartsConfig.setPie(item)
        const indicator = ChartsConfig.setIndicator(item, data || defaultData)

        setSpec({
            type,
            data: { values: data || defaultData },
            color: data ? (color || data.map(item => item.color || '#13c2c2')) : ChartsConfig.DefaultColor,
            stack,
            background,
            padding,
            outerRadius,
            innerRadius,
            valueField: 'value',
            categoryField: 'type',
            axes,
            title,

            label,
            tooltip,
            crosshair,
            totalLabel,
            legends,

            pie,
            indicator
        })
        console.log('spec', {
            type,
            data: { values: data || defaultData },
            color: data ? (color || data.map(item => item.color || '#13c2c2')) : ChartsConfig.DefaultColor,
            stack,
            background,
            padding,
            outerRadius,
            innerRadius,
            valueField: 'value',
            categoryField: 'type',
            axes,
            title,

            label,
            tooltip,
            crosshair,
            totalLabel,
            legends,

            pie,
            indicator
        })
    }

    useEffect(() => {
        if (apiData?.length !== 0 && config?.list_apiName) {
            const { list_apiName, list_dataLevel, list_dataType, arr_data } = config
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            if (list_dataType === 'array') {
                const arr = arr_data?.map(item => {
                    const obj = data.find(v => v[item.title] === item.group)
                    return ({ type: item.group, value: obj[item.field], color: item.color })
                })
                setSpecFunc(arr)
                return
            }
            if (list_dataType === 'object') {
                const { obj_title, obj_field, obj_color } = config
                const obj = data.map(item => {
                    return ({
                        uuid: item.uuid,
                        type: item[obj_title],
                        value: item[obj_field],
                    })
                })
                const color = obj_color?.map(item => item.color)
                setSpecFunc(obj, color)
                return
            }
            setSpecFunc()
        } else setSpecFunc()
    }, [config, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />
};

export default TempChartsA05